<!-- 消息内容 -->
<template>
  <div id="" class="messageCon">
    <img class="headerimg" :src="imgUrlLink(msglist.author.headPortrait)" alt="">
    <div class="messagediv" @click="toMsgcon()">
      <span class="name">{{msglist.author.nickName}}</span>
      <p class="">{{msglist.content}}</p>
      <div class="replyMsg" v-for="elem in msglist.reply" :key="elem.key">
        <span>{{elem.author.nickName}}：</span>
        {{elem.content}}
      </div>
      <div class="circlebtm">
        <span>{{reviewTime(msglist.reviewTime)}}</span>
        <span @click.stop="praise(msglist.id)">
          <!-- <img src="@/assets/playcircleImage/reply_icon.png" alt=""> 24 -->
          <img src="@/assets/playcircleImage/snap1.png" alt="" v-if="msglist.isPraise">
          <img src="@/assets/playcircleImage/snap2.png" alt="" v-else> {{msglist.praiseCount}}
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import {dateChangeTime} from '@/utils/util.js';
import {circleArticlePraise,circleCommentPraise} from '@/utils/ajaxRequest.js';
export default {
  name: "",
  props: ['msglist'],
  data: () => ({

  }),
  methods: {
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    // 日期格式转换
    reviewTime(time) {
      return dateChangeTime(time);
    },
    toMsgcon() {
      this.$router.push({path:'/msgCon',query:{msgCon:this.msglist}});
    },
    // 点赞、取消点赞
    praise(commentId) {
      let self = this;
      let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
      let praise = self.msglist.isPraise;    //自己是否点赞
      let praiseCount = self.msglist.praiseCount;   //点赞数量

      if(xlyd_loginInfo=='' || xlyd_loginInfo==undefined) {
        self.messageBox.confirm('您还未登录').then(action=>{
          self.$router.push({name:'login'});
        }).catch(error=>{
          console.log(error);
        })
      }else {   //已登录
        let praiseParam = {
          commentId:commentId,
          token:xlyd_loginInfo.token
        }
        circleCommentPraise(praiseParam).then(res=>{
          console.log(res);
          if(res) {
            self.toast(res.data.msg);
            self.msglist.isPraise = !praise;
            if(res.data.result==0) {    //当前为取消点赞
              self.msglist.praiseCount = praiseCount-1;
            }else {
              self.msglist.praiseCount = praiseCount+1;
            }
          }
        })
      }
    }
  },
  mounted() {
    //do something after mounting vue instance
    console.log(this.msglist);
  }
}
</script>
<style lang="scss" scoped>

.messageCon{
  @include flex;
  align-items: flex-start;
  margin-bottom: 10px;
  .headerimg{
    width: 50px; height: 50px;
    border-radius: 100%;
  }
  .messagediv{
    @include flexcell;
    border-bottom: 1px solid $borderColor;
    margin-left: 10px;
    line-height: 1.5em;
    .name{
      color: $lightColor;
      font-size: 12px;
    }
  }
}
.replyMsg{
  background: $boxBgcolor;
  padding: 6px 10px;
  margin-bottom: 10px;
  span{
    color: $blueColor;
  }
}
.circlebtm{
  @include flex;
  justify-content: space-between;
  color: $grayColor;
  margin-bottom: 10px;
  img{
    width: 15px;
  }
  span:last-child{
    img{
      margin-left: 10px;
    }
  }
}
</style>
